<template>
	<div class="header sys-dept">
		<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
			<el-button v-has="'sys-dept-add'" type="primary" @click="addOrUpdateHandle()">添加
			</el-button>
			<el-button v-has="'sys-dept-delete'" type="danger" @click="delListHandle()">批量删除
			</el-button>
			<el-form-item prop="searchKey">
				<el-input v-model="dataForm.searchKey" placeholder="手机号" clearable />
			</el-form-item>
			<el-button type="primary" @click="getDataList">搜索</el-button>
		</el-form>
		<template>
			<el-table border :data="tableData.data" v-loading="tableData.loading"
				@selection-change="selectionChangeHandle" @sort-change="tableSortHandle" style="width: 100%"
				row-key="id" :tree-props="{children: 'children'}">>
				<el-table-column type="selection" align="center" width="40" />
				<el-table-column type="index" :index="indexMethod" width="50" />
				<el-table-column label="头像">
					<template v-slot="scope">
						<img class="user-avatar" :src="scope.row.avatarUrl" />
					</template>
				</el-table-column>
				<el-table-column prop="realName" label="姓名" />
				<el-table-column prop="phone" label="手机号" />
				<el-table-column prop="nickName" label="昵称" />
				<el-table-column prop="level" label="会员等级" />
				<el-table-column prop="address" label="地址" />
				<el-table-column prop="expireTime" label="过期时间" width="180">
					<template slot-scope="scope">
						{{scope.row.expireTime | formatDate}}
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" width="180">
					<template slot-scope="scope">
						{{scope.row.createTime | formatDate}}
					</template>
				</el-table-column>
				<el-table-column prop="updateTime" label="修改时间" width="180">
					<template slot-scope="scope">
						{{scope.row.updateTime | formatDate}}
					</template>
				</el-table-column>
				</el-table-column>
				<el-table-column fixed="right" label="操作" width="180">
					<slot slot-scope="scope">
						<el-button v-if="hasStaffPermission" type="success" size="mini" icon="el-icon-user-solid"
							@click="addOrUpdateHandleStaff(scope.row.id,scope.row.phone,scope.row.level)" />
						<el-button type="primary" size="mini" icon="el-icon-upload2"
							@click="addOrUpdateHandle(scope.row.id,scope.row.phone,scope.row.level)" />
						<el-popconfirm title="确定删除吗？" @confirm="deleteHandle(scope.row.id)">
							<el-button type="danger" size="mini" icon="el-icon-delete" slot="reference" />
						</el-popconfirm>
					</slot>
				</el-table-column>
			</el-table>
		</template>
		<div style="text-align: right;">
			<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
				:current-page="dataForm.pageNum" :page-sizes="[10, 50, 100, 200]" :page-size="dataForm.pageSize"
				layout="total, sizes, prev, pager, next, jumper" :total="tableData.total" />
		</div>
		<!-- 弹窗, 新增 / 修改 -->
		<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList()" />
	</div>
</template>

<style lang="css" scoped>
</style>

<script>
	import {
		list,
		del
	} from '@/api/sys/user'
	import AddOrUpdate from './add-or-update'

	export default {
		components: {
			AddOrUpdate
		},
		data() {
			return {
				addOrUpdateVisible: false,
				dataForm: {
					//当前页
					pageNum: 1,
					//每页显示条数
					pageSize: 10,
					searchKey: '',
					// orderBy: ''
				},
				ordMap: {},
				ids: [],
				tableData: {
					loading: false,
					// 总数
					total: 1,
					// 请求回来的数据
					data: [{
						id: "",
						createTime: '',
						name: '',
						address: '',
						updateTime: ''
					}]
				},
				hasStaffPermission: false
			}
		},
		created() {
			this.getDataList();
			this.getPermission();
		},
		methods: {
			// 索引列方法
			indexMethod(index) {
				return (this.dataForm.pageNum - 1) * this.dataForm.pageSize + index + 1;
			},
			// 分页功能
			handleSizeChange(val) {
				this.dataForm.pageSize = val;
				this.getDataList();
			},
			// 分页功能
			handleCurrentChange(val) {
				this.dataForm.pageNum = val;
				this.getDataList();
			},
			// 表格实现多选时的 change 事件
			selectionChangeHandle(params) {
				this.ids = [];
				params.map(item => this.ids.push(item.id));
			},
			tableSortHandle(obj, b) {
				this.ordMap[obj.prop] = obj.order;
				let ordList = [];
				for (let key in this.ordMap) {
					ordList.push({
						prop: key,
						order: this.ordMap[key]
					})
				}
				this.dataForm.ordList = ordList;
				this.searchClick()
			},
			getPermission() {
				let userInfo = this.$ls.get("userInfo");
				let permissionList = JSON.parse(userInfo.permissions);
				for (var i = 0; i < permissionList.length; i++) {
					console.log(permissionList[i])
					if (permissionList[i] < 40 && permissionList[i] > 37) { //有人员管理权限
						this.hasStaffPermission = true
						return
					}
				}
			},
			// 获取数据列表
			getDataList() {
				this.tableData.loading = true;
				this.request(list, this.dataForm, this, data => {
					this.tableData.data = data.list;
					this.tableData.total = data.total;
					this.dataForm.pageNum = data.pageNum;
					this.tableData.loading = false;
				})
			},
			searchClick() {
				this.dataForm.pageNum = 1;
				this.getDataList();
			},
			addOrUpdateHandle(id, phone, level) {
				this.addOrUpdateVisible = true;
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id, phone, level, false);
				})
			},
			addOrUpdateHandleStaff(id, phone, level) {
				this.addOrUpdateVisible = true;
				this.$nextTick(() => {
					this.$refs.addOrUpdate.init(id, phone, level, this.hasStaffPermission);
				})
			},
			delListHandle() {
				if (this.ids.length === 0) return this.error('请先选择');
				this.alert('确定要删除吗？', () => this.deleteHandle());
			},
			deleteHandle(id) {
				let ids = id ? [id] : this.ids;
				console.log(ids)
				this.request(del, ids, this, data => {
					(this.tableData.data.length - ids.length === 1 && this.dataForm.pageNum > 1) &&
					(--this.dataForm.pageNum);
					this.getDataList();
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.user-avatar {
		width: 48px;
		height: 48px;
	}

	.el-button+.el-button {
		margin-left: 0;
	}
</style>
